<template>
<div>
  <div class="ui-tabs">
    <ul>
      <li class="ui-tabs__item" :class="{active:form.type==0}" @click="changeTabs(0)">
        <span>{{data.total}} 全部</span>
      </li>
      <li class="ui-tabs__item" :class="{active:form.type==1}" @click="changeTabs(1)">
        <span>{{data.interviewCount}} 面试中</span>
      </li>
      <li class="ui-tabs__item" :class="{active:form.type==2}" @click="changeTabs(2)">
        <span>{{data.offerCount}} offer中</span>
      </li>
      <li class="ui-tabs__item" :class="{active:form.type==3}" @click="changeTabs(3)">
        <span>{{data.alreadyOfferCount}} 已offer</span>
      </li>
    </ul>
  </div>
  <table class="el-table ui-table" :class="{'table-fixed-header': isFixed}"
    cellspacing="0"
    cellpadding="0"
    border="0">
    <thead class="ui-table__thead">
      <tr>
        <th class="ui-table_column_0">
          <div class="cell t-left">
            <p class="ml-10">
              <el-checkbox v-model="checkAll" @change="changeCheckAll"></el-checkbox>
              <span style="margin-left:5px">全选</span>
            </p>
          </div>
        </th>
        <th class="ui-table_column_1">
          <div class="cell"></div>
        </th>
        <th class="ui-table_column_2">
          <div class="cell">面试流程跟踪</div>
        </th>
        <th class="ui-table_column_3">
          <div class="cell">
            <el-dropdown @command="handleInterviewPostCommand" trigger="click">
              <span class="el-dropdown-link">
                面试岗位 <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">全部</el-dropdown-item>
                <el-dropdown-item command="1">产品经理</el-dropdown-item>
                <el-dropdown-item command="2">运营编辑</el-dropdown-item>
                <el-dropdown-item command="3">架构师</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </th>
        <th class="ui-table_column_4">
          <div class="cell">更新时间</div>
        </th>
        <th class="ui-table_column_5">
          <div class="cell">
            <el-dropdown @command="handleSourceCommand" trigger="click">
              <span class="el-dropdown-link">
                简历来源 <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">全部</el-dropdown-item>
                <el-dropdown-item command="1">自己录入</el-dropdown-item>
                <el-dropdown-item command="2">伯乐</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </th>
        <th class="ui-table_column_6">
          <div class="cell">执行</div>
        </th>
      </tr>
    </thead>
  </table>
  <div v-if="isFixed" style="height:50px;"></div>
  <table class="el-table ui-table"
    cellspacing="0"
    cellpadding="0"
    border="0">
    <tbody>
      <tr v-for="column in data.list">
        <!-- 操作 -->
        <td class="ui-table_column_0" width="80">
          <div class="cell t-left">
            <p class="ml-10">
              <el-checkbox v-model="column.isChecked" @change="changeCheckItem"></el-checkbox>
              <i class="icon icon-collection ml-10" @click="column.isCollection = !column.isCollection" :class="{active: column.isCollection}" ></i>
            </p>
          </div>
        </td>

        <!-- 候选人 -->
        <td class="ui-table_column_1" width="16%">
          <div class="cell">
            <div class="td-user">
              <div class="user-head flex-grow-0">
                <img :src="column.head" alt="">
              </div>
              <div class="info">
                <p class="text-nowrap"><a class="button-text">{{column.name}}</a></p>
                <p class="text-nowrap">面试部门：<span style="color:#5e5e5e">{{column.interviewDepartment}}</span></p>
                <p class="text-nowrap">当前雇主：<span style="color:#5e5e5e">{{column.companyName}}</span></p>
                <p class="text-nowrap">面试流程：<span style="color:#5e5e5e">{{column.process}}</span></p>
              </div>
            </div>
          </div>
        </td>

        <!-- 面试流程跟踪 -->
        <td class="ui-table_column_2" width="16%">
          <div class="cell">
            <div v-for="item in column.currentStep" class="mt-5 mb-5">
              <a href="#" style="color: #ff8c5f">{{item}}</a>
            </div>
          </div>
        </td>

        <!-- 岗位面试 -->
        <td class="ui-table_column_3" width="16%">
          <div class="cell">
            <span style="color: #0073dd">
              {{column.interviewPost}}
            </span>
          </div>
        </td>

        <!-- 联系TA -->
        <td class="ui-table_column_4" width="16%">
          <div class="cell">
            <i class="icon icon-contact-wx" v-if="column.contact.wx"></i>
            <el-popover
              v-if="column.contact.mobile"
              placement="bottom-start"
              width="250"
              v-model="column.phonePopupVisible"
              popper-class="phonePopupVisible">
              <div>
                <div class="mt-10 mb-10">
                  <!-- <span class="icon icon-c-phone"></span> -->
                  <el-input size="mini" v-model="column.mobile" style="width:176px"></el-input>
                  <el-button size="mini" type="primary" class="ml-10" @click="takePhone(column)">呼叫</el-button>
                </div> 
              </div>
              <i class="icon icon-contact-mobile" slot="reference" @click="column.phonePopupVisible = true"></i>
            </el-popover>
            <i class="icon icon-contact-email" v-if="column.contact.email" @click="mailVisible=true"></i>
          </div>
        </td>

        <!-- 更新时间 -->
        <td class="ui-table_column_5" width="10%">
          <div class="cell">
            {{column.updateTime}}
          </div>
        </td>

        <!-- 简历来源 -->
        <td class="ui-table_column_6" width="10%">
          <div class="cell">
            {{column.resumeSource}}
          </div>
        </td>

        <!-- 执行 -->
        <td class="ui-table_column_7">
          <div class="cell">
            <ui-button size="mini" type="lightblue" class="table-button" @click="recommend(scope.row)">推荐给面试官</ui-button>
            <ui-button size="mini" type="green" class="table-button">锁定并安排面试</ui-button>
            <ui-button size="mini" type="gray" class="table-button">放弃</ui-button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- 邮件弹框 -->
  <m-mail :visible.sync="mailVisible"></m-mail>

  <!-- 电话弹框 -->
  <m-phone :visible.sync="phoneVisible"></m-phone>

  <!-- 推荐给面试官弹窗 -->
  <dialog-recommend :visible.sync="recommendVisible"></dialog-recommend>
</div>
</template>

<script>
  import api from '@/api/api.js'
  import {Checkbox, Table, TableColumn, Row, Col, Dropdown, DropdownMenu, DropdownItem, Popover, Button, Input} from 'element-ui'
  import Mail from '@/components/common/components/mail'
  import Phone from '@/components/common/components/phone'
  import DialogRecommend from '../dialogRecommend'
  export default {
    components: {
      [Checkbox.name]: Checkbox,
      [Table.name]: Table,
      [TableColumn.name]: TableColumn,
      [Row.name]: Row,
      [Col.name]: Col,
      [Dropdown.name]: Dropdown,
      [DropdownMenu.name]: DropdownMenu,
      [DropdownItem.name]: DropdownItem,
      [Popover.name]: Popover,
      [Button.name]: Button,
      [Input.name]: Input,
      'm-mail': Mail,
      'm-phone': Phone,
      'dialog-recommend': DialogRecommend
    },
    data () {
      return {
        loading: true,
        mailVisible: false, //邮件功能弹窗
        data: [], //表格数据内容
        currentPage: 1, //当前页数
        collaborationVisible: false, //项目协作弹窗
        form: {
          sort: '1',
          state: 0,
          type: 0,
        },
        mailVisible: false,
        phoneVisible: false,
        recommendVisible: false,
        tableHeight: null,
        isFixed: false,
        checkAll: false,
      }
    },
    created() {
      this.loadData()
      //获取表头配置数据
      window.addEventListener('scroll', () => {
        if(this.$route.path.indexOf('/post') == 0){
          this.initSticky()
        }
      })
    },
    mounted() {
      window.onresize = () => {
        this.initWidth()
      }
    },
    methods: {
      initSticky() {
        const _height = this.$util.getScrollTop()
        const _zoom = this.$util.getZoom()
        const topHeight = document.getElementsByClassName('temp-header')[0].clientHeight + 
          document.getElementsByClassName('search-form')[0].clientHeight + 
          document.getElementsByClassName('ui-tabs')[0].clientHeight + 
          70
        if(_height >= topHeight * _zoom) {
          this.isFixed = true
          this.initWidth()
        } else {
          this.isFixed = false
          this.initWidth()
        }
      },
      initWidth() {
        for(let i=0; i<8; i++) {
          if(document.getElementsByClassName('ui-table_column_' + i)[1]) {
            const _w = document.getElementsByClassName('ui-table_column_' + i)[1].clientWidth || 0
            document.getElementsByClassName('ui-table_column_' + i)[0].style.width = _w + 'px'
          }
        }
        if(document.getElementsByClassName('ui-table')[1]){
          document.getElementsByClassName('ui-table')[0].style.width = document.getElementsByClassName('ui-table')[1].clientWidth + 'px'
        }
      },
      loadData() {
        // 获取表格数据
        this.loading = true;
        this.data = {
          total: 130,
          interviewCount: 30,
          offerCount: 30,
          alreadyOfferCount: 30,
          list: []
        }
        var data= []
        for(var i=0; i<20; i++){
          data.push({
            id: 1,
            type: '伯乐', //类型
            name: '周宇', //姓名
            head: 'https://apic.douyucdn.cn/upload/avatar/003/92/16/12_avatar_middle.jpg', //头像
            interviewPost: '21527-腾讯企鹅辅导学科运营', //面试岗位
            interviewDepartment: '音乐财经部', //面试部门
            wordPlace: '深圳', //工作地
            workType: '正式', //类型
            education: '本科', //学历
            currentStep: [
              '步骤一',
              '步骤二',
              '步骤三'
            ], //当前步骤
            manage: 'mywaymai', //处理人
            startTime: '2018-9-22', //发起时间
            endTime: '2018-10-22', //到达时间
            updateTime: '2018-10-22', //更新时间
            now: 0,
            total: 0,
            demandRank: 'P2', //需求职级
            demandPosition: '产品运营', //需求职位
            demandType: '新增需求', //需求类型
            phone: '13342223344',
            email: ' ylrocks@icloud.com',
            referee: 'huanhu',
            recommendedReason: '',
            process:  '测试测试测试',
            contact: { //联系TA
              wx: true,
              mobile: true,
              email: true,
            },
            mobile: '13344233323',
            resumeSource: '自己录入'
          })
        }
        this.data.list = this.data.list.concat(data);
        this.$nextTick(_ => {
          this.initWidth()
        })
        this.loading = false;
      },
      //切换tab页面
      changeTabs(tab) {
        if(this.form.type !== tab){
          this.form.type = tab;
          this.loadData();
        }
      },
      // 表头筛选面试岗位
      handleInterviewPostCommand(command) {
        console.log(command)
      },
      //点击全选时
      changeCheckAll(){
        var flag = true;
        this.tableData.forEach(item => {
          if(!item.isChecked){
            flag = false
          }
        })
        if(flag){
          this.noHeaderHandleVisible = true
        }else{
          this.noHeaderHandleVisible = false
        }
        this.tableData.forEach(item => {
          item.isChecked = !flag
        })
      },
      changeCheckItem() {
        var flag = false
        this.tableData.forEach(item => {
          if(item.isChecked){
            flag = true
          }
        })
        if(!flag){
          this.noHeaderHandleVisible = true
        }else{
          this.noHeaderHandleVisible = false
        }
      },
      // 表头筛选简历来源
      handleSourceCommand(command) {
        console.log(command)
      },
      takePhone(item) {
        item.phonePopupVisible = false
        this.phoneVisible = true;
      },
      // 推荐给面试官
      recommend(data) {
        this.recommendVisible = true
      },
    }
  }
</script>

<style lang="scss">
  .phonePopupVisible:last-child{
    display: none!important;
  }
</style>
